/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/* eslint-disable react/jsx-no-bind */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from 'antd';
import PageHeaderLayout from '@/layouts/PageHeaderLayout';
import StationRecord from '@/components/StationRecord';
import styles from './style.less';
import AddStation from './components/AddStation';

@connect(({ loading, station, user, setting }) => ({
  station,
  user,
  submitting: loading.effects['station/saveStation'],
  getListLoading: loading.effects['station/getStationList'],
  ...setting,
}))
@Form.create()
export default class Station extends PureComponent {
  state = {
    isSuccess: false,
  };

  setFormValue(record) {
    const { site_name = '', site_charge = '', site_phone = '', site_id, is_inn_area, is_gp_area } =
      record || {};
    this.setState({
      currentStation: {
        site_charge,
        site_name,
        site_phone,
        site_id,
        is_inn_area: is_inn_area == 2,
        is_gp_area: is_gp_area == 2,
      },
    });
  }

  getList() {
    const { dispatch } = this.props;
    dispatch({
      type: 'station/getStationList',
    });
  }

  handleDelete({ site_id }) {
    const { dispatch } = this.props;
    dispatch({
      type: 'station/deleteStation',
      payload: {
        site_id,
      },
    }).then(() => {
      this.getList();
    });
  }

  handleSubmit(closeModal) {
    const {
      dispatch,
      form: { validateFields, resetFields },
    } = this.props;
    validateFields((err, fieldsValue) => {
      if (err) {
        this.setState({ isSuccess: false });
        return;
      }
      const { currentStation } = this.state;
      const { site_id } = currentStation || {};
      const { is_inn_area, is_gp_area } = fieldsValue || {};

      dispatch({
        type: 'station/saveStation',
        payload: {
          ...fieldsValue,
          is_inn_area: is_inn_area ? 2 : 1,
          is_gp_area: is_gp_area ? 2 : 1,
          site_id,
        },
      }).then(() => {
        const {
          station: { code },
        } = this.props;
        if (!code) {
          resetFields();
        }
        closeModal({ visible: false });
        this.getList();
      });
    });
  }

  render() {
    const {
      form,
      station: { list },
      submitting,
      getListLoading,
      options: { key } = {},
    } = this.props;
    const { isSuccess, currentStation } = this.state;
    const { resetFields } = form;

    return (
      <PageHeaderLayout title={key === 'yz' ? '片区' : '站点'}>
        <div className={styles.main}>
          <StationRecord
            type="station"
            dataSource={list}
            submit={this.handleSubmit.bind(this)}
            resetFields={resetFields}
            isSuccess={isSuccess}
            setFormVlaue={this.setFormValue.bind(this)}
            handleDelet={this.handleDelete.bind(this)}
            confirmLoading={submitting}
            loading={getListLoading}
          >
            <AddStation form={form} currentStation={currentStation} />
          </StationRecord>
        </div>
      </PageHeaderLayout>
    );
  }
}
